<!-- 查询用户信息 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="12">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="售后订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入售后订单号" />
                        </a-form-item>
                    </a-col>
                       <a-col :md="8" :sm="12">
                        <a-form-item label="退款订单号">
                            <a-input v-model="payOrderCode" allow-clear placeholder="请输入退款订单号" />
                        </a-form-item>
                    </a-col>
                     <a-col :md="8" :sm="12">
                        <a-form-item label="商品订单号">
                            <a-input v-model="goodsOrderCode" allow-clear placeholder="请输入商品订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="订单状态">
                            <a-select v-model="status" placeholder="请选择" allowClear @change="query">
                                <a-select-option v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                     <a-col :md="8" :sm="12">
                        <a-form-item label="订单类型">
                            <a-select v-model="type" placeholder="请选择" allowClear @change="query">
                                <a-select-option v-for="(item,i) in typeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                        <a-form-item label="订单日期">
                            <a-range-picker @change="onChange" allowClear/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="query()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table size="small" rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 5, total: total ,showSizeChanger: true,pageSize: size}"  :scroll="{ x: 2400 }"  >
           <template slot="goodsInfo" slot-scope="text, record">
             <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[JSON.parse(record.goodsInfo)]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                    <template  slot="actions" >
                        <span style="margin-right: 4px" >
                          付款金额:{{ record.payAmount }}
                        </span>
                    </template>
                      <template  slot="actions"  >
                        <span style="margin-right: 4px" >
                          折扣金额:{{record.discountAmount}}
                        </span>
                    </template>
                     <template  slot="actions"  >
                        <span  >
                            退款金额:{{ record.refundAmount }}
                        </span>
                    </template>
                <a-list-item-meta :description="item.specInfo">
                    <a slot="title" >{{ item.goodsName }}</a>
                    <a-avatar slot="avatar" :src="item.goodsPicture" />
                </a-list-item-meta> 
                <span  >  运费:{{record.freight}}   <a-tag color="red" >{{record.isRefundFreight==1?'退运费':'不退运费'}}</a-tag> <a-tag color="red" >{{record.isSendBack==1?'寄回':'不寄回'}}</a-tag>  </span>    
                </a-list-item>
            </a-list>
           </template>
          
           <template slot="phone" slot-scope="text, record" >
                <a-list item-layout="horizontal"  size="small"  :data-source="[record]">
                <a-list-item slot="renderItem" slot-scope="item">
                    <a-list-item-meta :description="'联系人手机号:'+item.contactPhone " >
                        <a slot="title" >联系人姓名:{{item.contactName }}</a>
                    </a-list-item-meta>
                    注册手机号:{{item.phone}}
                </a-list-item>
            </a-list>
           </template>
            <template slot="orderCode" slot-scope="text, record" >
                <a-list item-layout="horizontal"  size="small" :data-source="[record]">
                <a-list-item slot="renderItem" slot-scope="item">
                    <a-list-item-meta :description="'售后单号:'+item.orderCode " >
                        <a slot="title" >订单号:{{ item.orderCode }}</a>
                    </a-list-item-meta>
                        退款单号:{{ item.payOrderCode }}
                </a-list-item>
            </a-list>
           </template>
             <template slot="applyReason" slot-scope="text, record" >
                <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[record]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                     <img v-for="img in item.replenishPicture.split(',')"
                        slot="extra"
                        width="50"
                        alt="logo"
                        :src="img"
                        :key="img"
                    />
                <a-list-item-meta :description="item.description" >
                    <a slot="title" >{{ item.applyReason }}</a>
                </a-list-item-meta>
                </a-list-item>
            </a-list>
           </template>
            <template slot="receiver" slot-scope="text, record" >
                <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[record]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                    <a-list-item-meta :description="item.receiverPhone">
                        <a slot="title" >{{ item.receiver }}</a>
                    </a-list-item-meta>
                    {{item.receiverAddress}}
                </a-list-item>
            </a-list>
           </template>
              <template slot="expressCompany" slot-scope="text, record" >
                <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[record]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                     <img
                        slot="extra"
                        width="120"
                        alt="logo"
                        :src="item.expressVoucherPicture"
                    />
                <a-list-item-meta>
                    <a slot="title" >{{ item.expressCompany }}-{{item.expressNumber}}</a>
                </a-list-item-meta>
                </a-list-item>
            </a-list>
           </template>
            <template slot="type" slot-scope="text, record">
                 <a-tag color="red" v-if="record.type==0" >退款</a-tag>  
                  <a-tag color="pink" v-else-if="record.type==1" >退货</a-tag>  
                    <a-tag color="orange" v-else-if="record.type==2" >换货</a-tag>  
            </template>
             <template slot="status" slot-scope="text, record">
                 <a-tag :color="statuss(record.status)[1]"  >{{statuss(record.status)[0]}}</a-tag>  
            </template>
               <template slot="operation" slot-scope="text, record">
                <!-- <div class="editable-row-operations"> -->
                    <!-- v-if="record.status=='0' && record.status=='4'" -->
                    <a-button   type="link" @click="updateStatus(record)">售后</a-button>
                <!-- </div> -->
            </template>
        </a-table>
           <a-drawer width="600" title="订单售后"  placement="right" :closable="true" :visible="statusTrueFalseBy" @close="onClose">
                 <a-descriptions title="商品信息">
                   <a-descriptions-item label="商品名称">
                    {{item.goodsInfos.goodsName}}
                </a-descriptions-item>
                <a-descriptions-item label="创建时间">
                    {{item.createTime}}
                </a-descriptions-item>
            </a-descriptions> 
              <a-descriptions title="售后选择"  > </a-descriptions>
               <a-form  style="width:600px"  :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                      <a-form-item label="审核状态">
                        <a-select v-model="item.status" style="width: 120px" >
                            <a-select-option  v-for="(one) in statusList"  v-if="one.id==1 || one.id==2 || one.id==6" :key="one.id">
                                {{ one.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="是否需要寄回">
                        <a-radio-group v-model="item.isSendBack" >
                            <a-radio  v-for="(items,i) in isSendBackList" :key="i" :value="items.id">{{items.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                     <a-form-item v-if="item.isSendBack==1" label="退件收货人">
                        <a-input v-model="item.receiver"   placeholder="请输入退件收货人" allow-clear></a-input>
                    </a-form-item>
                     <a-form-item v-if="item.isSendBack==1" label="退货手机号">
                        <a-input v-model="item.receiverPhone"   placeholder="请输入退货手机号" allow-clear></a-input>
                    </a-form-item>
                      <a-form-item v-if="item.isSendBack==1" label="退货地址">
                        <a-textarea v-model="item.receiverAddress"   placeholder="请输入退货收货人地址" allow-clear></a-textarea>
                    </a-form-item>
                     <a-form-item label="订单备注">
                        <a-textarea v-model="item.remarks"   placeholder="请输入订单备注" allow-clear></a-textarea>
                    </a-form-item>
                      <a-form-item  label=" "  :wrapper-col="{ span: 14 }">
                        <a-button type="primary" @click="_updateGoodsOrderStatus(item)"  >售后</a-button>
                    </a-form-item>
                </a-form>
           </a-drawer>
    </div>
</template>

<script>
import { columns } from './table';
import { queryGoodsAftersale, updateGoodsAftersale  } from '@/api/mall/order';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            isload: false,
            dataList: [],
            columns,
            total: 0,
            page: 1,
            size: 5,
            phone: '',
            userName: '',
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            orderCode:"",//售后订单号	
             payOrderCode:"",//退款订单号	
             goodsOrderCode:"",//商品订单号	
            visible: false,
            status:"",
            statusList:[
                {id:'0',name:'审核中'},
                {id:'1',name:'审核通过'},
                {id:'2',name:'审核拒绝'},
                {id:'3',name:'退款成功'},
                {id:'4',name:'待寄回'},
                {id:'5',name:'卖家待收货'},
                {id:'6',name:'卖家确认收货'},
                {id:'7',name:'已取消'},
            ],
            type:"",
            typeList:[
                {id:'0',name:'退款'},
                {id:'1',name:'退货'},
                {id:'2',name:'换货'},
            ],
            isSendBackList:[
                 {id:'0',name:'否'},
                    {id:'1',name:'是'},
            ],
            express:{},
            item:{
                goodsInfos:{
                    goodsName:""
                },
                receivingAddressInfos:{
                    receiver:"",
                    receiverPhone:"",
                    province:"",
                    city:"",
                    area:"",
                    detailedAddress:"",

                }
            },
            statusTrueFalseBy:false,
            expressCompany:"",
            expressNumber:"",
        };
    },
    components: {
    },
    async created(){
        try {
            this.getData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        onChange(date, dateString) {
            console.log(date, dateString);
            this.startTime = dateString[0]
            this.endTime = dateString[1]
            this.getData()
        },
        query(){
            this.page=1
             this.getData()
        },
        // 查询会员信息
        getData(){
            let _this = this
            var startTime,endTime
            if(_this.startTime!='' || _this.endTime !=''){
                startTime=_this.startTime+' 00:00:00'
                endTime=_this.endTime+' 23:59:59'
            }
            const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'orderCode':_this.orderCode,
                'payOrderCode':_this.payOrderCode,
                'goodsOrderCode':_this.goodsOrderCode,
                'status':_this.status,
                'type':_this.type,
                'startTime':startTime,
                'endTime':endTime,
                'page':_this.page - 1,
                'size':_this.size,
            }
            queryGoodsAftersale(params)
            .then(res=>{
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        statuss(val){
            if(val==0){
                return ['审核中','#ffd333']
            }else if(val==1){
                return ['审核通过','#87d068']
            }else if(val==2){
                return ['审核拒绝','#f5222d']
            }else if(val==3){
                return ['退款成功','#87d068']
            }else if(val==4){
                return ['待寄回','#ffd333']
            }else if(val==5){
                return ['待卖家收货','#ffd333']
            }else if(val==6){
                return ['卖家确认收货','#ffd333']
            }else if(val==7){
                return ['已取消','#f5222d']
            }
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 查询订单
       
         updateStatus(item){
            item.goodsInfos=JSON.parse(item.goodsInfo)
            this.item=item
            this.statusTrueFalseBy=true
         },
         _updateGoodsOrderStatus(item){
             var _this=this
             if(item.status==0){
                  this.$message.warning('请选择审核状态')
                 return
             }
               const params = {
                'orderCode':item.orderCode,
                'status':item.status,
                'remarks':item.remarks,
                'isSendBack':item.isSendBack,
                'receiver':item.receiver,
                'receiverPhone':item.receiverPhone,
                'receiverAddress':item.receiverAddress
            }
             updateGoodsAftersale(params)
                .then(res=>{
                    if(res.success){
                        _this.$notification['success']({
                        message: '提示',
                        description: '操作成功',
                        duration: 8,
                    })
                    _this.getData()
                    _this.statusTrueFalseBy = false;
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
           

         },
        onClose() {
             this.visible = false;
             this.statusTrueFalseBy=false
        },
       
    }
}

</script>
<style scoped>
>>>.ant-steps-vertical .ant-steps-item-content{
    width: 90% !important;
}

</style>